<!--
	版本声明：
	* 由于 WanlLive、WanlChat、以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任
	* 深圳前海万联科技有限公司 @www.i36k.com
-->
<template>
  <view class="wanl-header" :style="{ top: statusBarHeight + 'px' }">
    <view class="wanl-header-left">
      <view class="wanl-header-img" @tap="toShop(userinfo.id)">
        <image class="wanl-header-image" :src="stcOss(userinfo.avatar)" mode=""></image>
      </view>
      <view class="wanl-header-shop" @tap="toShop(userinfo.id)">
        <text class="wanl-header-shop-text">{{ !userinfo.shopname ? '加载中..' : userinfo.shopname }}</text>
        <view class="wanl-header-shop-info">
          <text class="wanl-header-shop-info-text">{{ numFormat(online) }} 人观看</text>
        </view>
      </view>
      <view class="wanl-header-shop-button" v-if="!isFollow" @tap="shopLike">
        <text class="wanl-header-shop-button-text">关注</text>
      </view>
    </view>

    <view class="wanl-header-right">
      <view class="wanl-header-marker">
        <view class="wanl-header-marker-name">
          <text class="wanl-header-marker-name-text" v-if="state == 0">正在准备</text>
          <text class="wanl-header-marker-name-text" v-if="state == 1">商城直播</text>
          <text class="wanl-header-marker-name-text" v-if="state == 2">直播回放</text>
        </view>
        <view class="wanl-header-marker-id">
          <text class="wanl-header-marker-id-text">ID:{{ !userinfo.id ? 0 : userinfo.id }}</text>
        </view>
      </view>
      <view class="wanl-header-close" @tap="liveBack">
        <image class="wanl-header-close-btn" src="/static/images/live/close.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'wanlLiveHeader',
  props: {
    statusBarHeight: {
      default: 0,
    },
    online: {
      type: Number,
      default: 0,
    },
    state: {
      default: 0,
    },
    isFollow: {
      type: Boolean,
      default: false,
    },
    userinfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  methods: {
    shopLike() {
      this.$emit('change');
    },
    liveBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    toShop(id) {
      uni.navigateTo({
        url: `/pages/shop/index?id=${id}`,
      });
    },
    stcOss(url) {
      let oss = this.$store.state.common.appUrl.oss;
      let image = '';
      if (url) {
        if (/^(http|https):\/\/.+/.test(url)) {
          image = url;
        } else {
          image = oss + url;
        }
      } else {
        image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
      }
      return image;
    },
    numFormat(num) {
      return num > 9999 ? (num - (num % 1000)) / 10000 + '万' : num;
    },
  },
};
</script>

<style scoped>
.wanl-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-left: 25rpx;
  padding-right: 25rpx;
  padding-top: 4rpx;
  /* #ifndef APP-PLUS */
  padding-top: 16rpx;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}
.wanl-header-left {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 10rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-right: 10rpx;
  line-height: 1.18;
}
.wanl-header-img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 999px;
  overflow: hidden;
}
.wanl-header-image {
  width: 60rpx;
  height: 60rpx;
}

.wanl-header-shop {
  margin-left: 15rpx;
  margin-right: 25rpx;
}
.wanl-header-shop-text {
  color: #ffffff;
  font-size: 26rpx;
}
.wanl-header-shop-info {
}
.wanl-header-shop-info-text {
  font-size: 20rpx;
  color: #ffffff;
}
.wanl-header-shop-button {
  background-color: #f02b57;
  align-items: center;
  justify-content: center;
  height: 50rpx;
  width: 100rpx;
  border-radius: 100px;
  margin-right: 8rpx;
}
.wanl-header-shop-button-text {
  color: #ffffff;
  font-size: 25rpx;
}

.wanl-header-right {
  flex-direction: row;
  /* #ifdef MP */
  position: absolute;
  top: 100rpx;
  right: 25rpx;
  /* #endif */
}
.wanl-header-marker {
  background-color: rgba(0, 0, 0, 0.2);
  height: 70rpx;
  justify-content: center;
  align-items: center;
  margin-right: 50rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  border-bottom-left-radius: 20rpx;
  overflow: hidden;
}
.wanl-header-marker-name {
  background-color: #ffffff;
  height: 35rpx;
  justify-content: center;
  padding-left: 10rpx;
  padding-right: 10rpx;
}
.wanl-header-marker-name-text {
  font-size: 20rpx;
}
.wanl-header-marker-id {
  height: 35rpx;
  justify-content: center;
}
.wanl-header-marker-id-text {
  font-size: 20rpx;
  color: #ffffff;
}
.wanl-header-close {
  height: 32rpx;
  /* #ifdef MP */
  justify-content: center;
  /* #endif */
}
.wanl-header-close-btn {
  width: 32rpx;
  height: 32rpx;
}
</style>
